<!-- OrderDetails.vue -->
<template>
  <el-dialog
    v-model="flag"
    title="详情菜单"
    custom-class="hei_dialog"
    center
    width="600px"
  >
    <div class="menu-padd">
      <div class="Menu-details menu-span"><span>下单信息</span></div>
      <div v-for="(item, index) in orderitems" :key="index">
        <div class="Menu-details menu-margin">
          <span class="menu-item">商品:{{ item.dishName }}</span>
          <span class="menu-item">图片:
            <el-image
              style="width: 20px; height: 20px"
              :src="item.image"
              :preview-src-list="[item.image]"
              :z-index="999"
              fit="cover"
            />
          </span>
          <span class="menu-item">单价:{{ item.oneprice }}</span>
          <span class="menu-item">数量:{{ item.Quantity }}</span>
          <span class="menu-item">总价:{{ item.sumprice}}</span>
          
        </div>
      </div>
      <div class="Menu-right menu-span">
        <span>总计:{{ totalPrice }}元</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  setup() {
    // 可以在这里使用 props.data 访问传递过来的数据
    const res = reactive({flag: false, orderitems: [], totalPrice: 0});

    function popup(vals) {
      if (vals) {
        console.log(vals);
        res.orderitems = vals.orderItems.orderItems;
        res.totalPrice = vals.orderItems.totalPrice;
        res.flag = true;
        console.log(res);
      }
    }

    return {...toRefs(res), popup};
  },
};
</script>

<style>
/* 样式 */
.el-dialog__body {
  overflow: auto;
  height: 300px;
  border-radius: 5px;
}
</style>
